<template>
    <div>
        <Header></Header>
        <div class="sendPicture">
            <p>* 请拍摄或上传辅助证明材料请确保图片清晰,四角完整，做多上传三张。</p>
            <div class="imgBox">
                <uploadImg :img-url="imgurl1" @change="change1" @getImgData="getImgData1"></uploadImg>
                <uploadImg :img-url="imgurl2" @change="change2" @getImgData="getImgData2"></uploadImg>
                <uploadImg :img-url="imgurl3" @change="change3" @getImgData="getImgData3"></uploadImg>
            </div>
        </div>
        <div @click="submitIMG">
            <MyButton :ButtonNext="ButtonNext"></MyButton>
        </div>
    </div>
</template>

<script>
    import Header from '@/components/Header.vue'
    import MyButton from '@/components/MyButton.vue'
    import Upload from 'element-ui'
    import Dialog from 'element-ui'
    import {Tools} from '@/lib/tools'
    import {AXIOS_POST} from '@/lib/axios'
    import uploadImg from '@/components/Upload-img.vue'
    import { mapState} from 'vuex'

    export default {
        name: "auxiliary",
        components: {
            Header,
            MyButton,
            Upload,
            Dialog,
            uploadImg
        },
        computed: {
            ...mapState('auxiliary',['eightAuxiliaryPath','eightAuxiliarySize','thirteenAuxiliaryPath',
                'thirteenAuxiliarySize',
                'fourteenAuxiliaryPath','fourteenAuxiliarySize',
                'imgurl1','imgurl2','imgurl3','authenticationPicture'])
        },
        data() {
            return {
                imageUrl: '',
                ButtonNext: '保存返回',
                shopImgList: [],
                shopImgUrl: [],
                dialogImageUrl: '',
                dialogVisible: false,
            }
        },
        methods: {
            change1 ( e ) {
                this.$store.state.auxiliary.imgurl1 = e
            },
            change2 ( e ) {
                this.$store.state.auxiliary.imgurl2 = e
            },
            change3 ( e ) {
                this.$store.state.auxiliary.imgurl3 = e
            },

            getImgData1(data){
                // this.$store.state.auxiliary.eightAuxiliaryPath=data.file_path,
                this.$store.state.auxiliary.eightAuxiliarySize=data.file_size,
                this.$store.state.companyAddress.auxiliaryPicture=1
                this.$store.state.auxiliary.eightAuxiliaryPath='|'+'辅助证明材料'+','+'0008'+','+data.file_path+','+data.file_size
            },
            getImgData2(data){
                // this.$store.state.auxiliary.thirteenAuxiliaryPath=data.file_path,
                this.$store.state.auxiliary.thirteenAuxiliarySize=data.file_size,
                this.$store.state.companyAddress.auxiliaryPicture=1
                this.$store.state.auxiliary.thirteenAuxiliaryPath='|'+'辅助证明材料'+','+'0013'+','+data.file_path+','+data.file_size
            },
            getImgData3(data){
                // this.$store.state.auxiliary.fourteenAuxiliaryPath=data.file_path,
                this.$store.state.auxiliary.fourteenAuxiliarySize=data.file_size,
                this.$store.state.companyAddress.auxiliaryPicture=1
                this.$store.state.auxiliary.fourteenAuxiliaryPath='|'+'辅助证明材料'+','+'0014'+','+data.file_path+','+data.file_size
            },

            submitIMG(){
                console.log( this.$store.state.auxiliary.eightAuxiliaryPath)
                console.log(this.$store.state.auxiliary.thirteenAuxiliaryPath)
                console.log(this.$store.state.auxiliary.fourteenAuxiliaryPath)
                this.$router.push({
                    path: `/companyAddress`,
                })
            }
        }
    }
</script>
<style scoped>
    .sendPicture {
        text-align: center;
        background: white;
        color: #2dbbfd;

    }
    .sendPicture>p{
        padding: 1.25rem;
    }
    .imgBox{
        padding-top: 1.25rem;
        padding-bottom: 2.25rem;
    }

</style>